/**
 * Created by Ysssssss on 2021/4/6.
 */

import React, { PureComponent } from 'react'
import {connect} from "react-redux";
import PageBackHeader from "@common/PageBackHeader";
import {RightCircleFilled, RightCircleOutlined} from "@ant-design/icons";
import {withRouter} from "react-router-dom";
import {getBilinInfo} from "@utils/localStorage";
import { getProductNatureStats } from "@sagas/productCenter";

@connect(
    ({ user, productCenter }) => ({
        userInfoInStore: user.userInfoInStore,
        productNatureStats: productCenter.productNatureStats,
    }),
    {
        getProductNatureStats
    }
)
@withRouter
class ProductTypeChoosePage extends PureComponent {
    componentDidMount () {
        this.props.getProductNatureStats()
    }

    handleClick (e) {
        let type =  e.currentTarget.dataset.type
        this.props.history.push(`/product-center/product/${type}/list`)
    }

    goSupplyGroupPage () {
        this.props.history.push('/product-center/supply-group')
    }

    render () {
        const { userInfoInStore, productNatureStats } = this.props
        const pStoreId = getBilinInfo('storeId') || 0
        const { biz_type: bizType } = userInfoInStore

        return (
            <div className="bilin-web">
                <PageBackHeader title="商品库" backUrl="/main"/>
                <div className="bilin-web-body product-type-choose-page">
                    <div className="product-type-line">
                        <div className="product-type"
                             data-type={1}
                             onClick={this.handleClick.bind(this)}
                        >
                            <div className="product-type-name ft-24">零售品</div>
                            <div className="product-type-intro ft-14">服装、食品、电器、数码、书籍、配件等</div>
                            <div className="product-type-remark ft-20">{ productNatureStats[1] ? `${productNatureStats[1]}件` : '我要创建' }</div>
                            <div className="product-type-entrance ft-20">
                                <RightCircleOutlined />
                                <RightCircleFilled />
                            </div>
                        </div>
                        <div className="product-type"
                             data-type={2}
                             onClick={this.handleClick.bind(this)}
                        >
                            <div className="product-type-name ft-24">虚拟品</div>
                            <div className="product-type-intro ft-14">礼品卡、优惠券、充值卡、会员权益等</div>
                            <div className="product-type-remark ft-20">{ productNatureStats[2] ? `${productNatureStats[2]}件` : '我要创建' }</div>
                            <div className="product-type-entrance ft-20">
                                <RightCircleOutlined />
                                <RightCircleFilled />
                            </div>
                        </div>
                        <div className="product-type disabled">
                            <div className="product-type-name ft-24">服务</div>
                            <div className="product-type-intro ft-14">课程、培训、体验、维修、生活服务等</div>
                            <div className="product-type-remark ft-20">敬请期待</div>
                        </div>
                    </div>
                    { bizType === 'agent' && pStoreId === 0 ? (
                        <div className="product-supply-group">
                            <div className="ft-16 ft-clr-ml">推荐使用</div>
                            <div className="product-supply-group-entrance" onClick={this.goSupplyGroupPage.bind(this)}>
                                <div>
                                    <div className="entrance-name ft-24">供货中心</div>
                                    <div className="entrance-intro ft-14">品牌可从商品库中挑选商品，为每个经销商差异化供货</div>
                                </div>
                                <div className="entrance-icon ft-20">
                                    <RightCircleOutlined />
                                    <RightCircleFilled />
                                </div>
                            </div>
                        </div>
                    ) : null }
                </div>
            </div>
        )
    }
}

export default ProductTypeChoosePage